<template>
  <div>
    <div>
      <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
        <md-popup-title-bar title="我的行程" ok-text cancel-text="取消" @cancel="cancel"></md-popup-title-bar>
        <div class="incity_trip_list">
          <md-scroll-view ref="scrollView" :auto-reflow="true" :scrolling-x="false" :bouncing="false">
            <div class="trip_list" v-for="(item, index) in tripArr" :key="index">
              <div v-if="item.doType == '1'">
                <div class="trip_list_left">
                  <h6 class="left_qu ative_qu"></h6>
                  <p class="left_hx ative_qu"></p>
                </div>
                <div class="trip_list_right right_ative">
                  <h6>{{ item.pointText }}</h6>
                  <p>{{ item.lnglatText }}</p>
                </div>
              </div>
              <div v-if="item.doType == '2'">
                <div class="trip_list_left">
                  <h6 class="left_car">
                    <img src="@/assets/imgs/car_icon.png" />
                  </h6>
                  <p class="left_hx"></p>
                </div>
                <div class="trip_list_right">
                  <h6>{{ item.pointText }}</h6>
                  <p>{{ item.lnglatText }}</p>
                </div>
              </div>
              <div v-if="item.doType == '0'">
                <div class="trip_list_left">
                  <h6 class="left_qu"></h6>
                  <p class="left_hx"></p>
                </div>
                <div class="trip_list_right">
                  <h6>{{ item.pointText }}</h6>
                  <p>{{ item.lnglatText }}</p>
                </div>
              </div>
            </div>
          </md-scroll-view>
        </div>
      </md-popup>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/wdqb-more.svg';
import { Popup, PopupTitleBar, Icon, Toast, Dialog, ScrollView } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import Loading from '@/components/loading';
import http from '@/common/http';
import { Base64 } from 'js-base64';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'incity_trip-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView
  },
  data() {
    return {
      tripArr: []
    };
  },
  created() {
    let params = {
      orderNo: this.$route.query.orderno
    };
    Loading.show();
    http.post('/pakj/city/getOrderStep', params).then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        this.tripArr = res.data.data;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  methods: {
    cancel() {
      this.value = false;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {}
};
</script>
<style lang="stylus">
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.incity_trip_list {
  background-color: #fff;
  padding-top: 20px;
  height: 600px;
  overflow: hidden;
  overflow-y: auto;
}

.trip_list {
  padding: 0px 30px;
  height: 150px;
}

.trip_list_left {
  float: left;
  position: relative;
}

.left_qu {
  width: 20px;
  height: 20px;
  background-color: #D8D8D8;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
}

.left_car {
  position: absolute;
  top: 0px;
  left: -10px;
  z-index: 100;
}

.left_car img {
  width: 37px;
  height: 68px;
}

.left_hx {
  background-color: #E0E0E0;
  width: 1px;
  height: 150px;
  position: relative;
  left: 8px;
}

.ative_qu {
  background-color: #FF6917;
}

.trip_list_right {
  float: left;
  margin-left: 52px;
}

.trip_list_right h6 {
  font-size: 32px;
  color: #666;
  font-weight: 400;
  position: relative;
  bottom: 10px;
}

.trip_list_right p {
  font-size: 24px;
  color: #999;
  margin-top: 10px;
}

.right_ative h6 {
  color: #333;
}
</style>
